<template>
    <div class="menu">
        <div class="menu-content">
            <div class="login-button" >
                <Avatar :url="avatar" :size="100" v-if="isLogin" />
                <div class="login" @click="openLogin" v-else>登录</div>
            </div>
            <p class="user-name">{{userName}}</p>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        Component
    } from 'vue-property-decorator';

    import {
        State
    } from 'vuex-class';

    import {
        LoginUser
    } from './../../../state/interface/user';

    import {
        Avatar
    } from './../../../components';

    @Component({
        name:`Menu`,
        components:{
            Avatar
        }
    })
    export default class Menu extends Vue {
        @State(({ user }) => user.loginUser || {}) loginUser!:LoginUser;

        mounted(){

        }

        get avatar() {
            const {
                avatar_url
            } = this.loginUser;
            return avatar_url;
        }

        get isLogin() {
            const {
                token
            } = this.loginUser;
            return !!token;
        }

        get userName() {
            const {
                loginname
            } = this.loginUser;
            return loginname;
        }

        openLogin() {
            this.$Login.show({
                position:`bottom`
            })
        }
    }
</script>

<style scoped lang="scss">
    .menu {
        height: 100%;
        width: 220px;
        background-color: #fff;
        border-right: 1px solid #f2f2f2;
    }

    .menu-content {
        padding-top: 35px;
    }

    .login-button {
        margin: auto;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: #f2f2f2;
    }

    .login {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 100px;
        font-size: 16px;
        font-weight: 500;
    }

    .user-name {
        text-align: center;
        font-size: 18px;
        color: #333;
        margin-top: 12px;
    }
</style>